<template>
  <div v-for="tag in tags" :key="tag">
    <div class="h-10 tag-min-width m-1 p-4 flex justify-center items-center rounded-lg bg-cyan-500">
      <span class="text-white">{{tag}}</span>
      <div class="ml-3 cursor-pointer" @click="delTag(tag)">
        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps} from "@vue/runtime-core";

const props = defineProps(["tags"])

function delTag(tag): void{
  const tagIndex = props.tags.indexOf(tag)
  props.tags.splice(tagIndex, 1)
}

</script>

<style scoped>
.tag-min-width{
  min-width: 3rem;
}
</style>
